<template>
  <div>
    <template v-if="labDesign.renderItem.actions && labDesign.renderItem.actions.length > 0">
      <el-divider>组件事件</el-divider>
      <el-table :data="labDesign.renderItem.actions" border>
        <el-table-column prop="label" align="center" label="事件">
          <el-tag slot-scope="scope" type="warning" effect="dark">{{ scope.row.label }}</el-tag>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="props">
            <el-button type="success" circle icon="el-icon-edit" @click="() => {openEvent(props.row)}" />
            <el-button type="danger" circle icon="el-icon-delete" @click="() => {removeEvent(props.row)}" />
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="labDesign.renderItem.apis && labDesign.renderItem.apis.length > 0" >
      <el-divider>组件请求</el-divider>
      <el-table :data="labDesign.renderItem.apis" border>
        <el-table-column prop="label" align="center" label="请求">
          <el-tag slot-scope="scope" type="danger" effect="dark">{{ scope.row.label }}</el-tag>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="props">
            <el-button type="success" circle icon="el-icon-edit" @click="() => {openRequest(props.row)}" />
            <el-button type="danger" circle icon="el-icon-delete" @click="() => {removeRequest(props.row)}" />
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog :visible.sync="eventVisible" title="事件编辑" width="80%">
      <el-row :gutter="8">
        <el-col :span="8">
          <app-method-table select @rowSelect="methodClick" :filters="[{field: 'methodGrammar',op: '=',value: 'javascript'}]"></app-method-table>
        </el-col>
        <el-col :span="16">
          <el-input v-model="eventInfo.callMethod" placeholder="引用函数" clearable />
          <span> return new Promise((resolve) => {</span>
          <lab-code ref="codeRef" v-model="eventInfo.eventScript" :config="{language: 'javascript'}" style="height: 500px" />
          <span>})</span>
          <div style="text-align: center">
            <el-button @click="saveEvent" type="primary">确定</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog :visible.sync="requestVisible" title="请求配置" width="80%">
      <request-config :request-info="requestInfo" @save="saveRequest"></request-config>
    </el-dialog>
  </div>
</template>

<script>
import LabDesign from "../../../mixins/LabDesign";
import RequestConfig from "./RequestConfig";
import MethodTable from "@/views/system/method/MethodTable";
import AppMethodTable from "@/views/system/app/method/AppMethodTable";

export default {
  name: "EventConfig",
  components: {AppMethodTable, MethodTable, RequestConfig},
  mixins: [LabDesign],
  data(){
    return {
      eventInfo: { trigger: '', eventScript: '', callMethod: '' },
      eventVisible: false,
      defaultCode: 'const { element, modelData, $this } = args; \n//业务逻辑\n \n //返回结果\nresolve({code:200});',
      requestVisible: false,
      requestInfo: { trigger: '',params: [], filters: [] }
    }
  },
  methods: {
    openEvent(row) {
      this.eventVisible = true
      const { events } = this.labDesign.activity
      const targetEvent = events.find(item => item.trigger === row.value)
      if (targetEvent) {
        this.$Util.copyAttr(targetEvent, this.eventInfo, null, this)
      } else {
        this.eventInfo.eventId = ''
        this.eventInfo.trigger = row.value
        this.eventInfo.callMethod = row.callMethod
        this.eventInfo.eventScript = this.defaultCode
      }
      const $codeRef = this.$refs.codeRef
      if ($codeRef) {
        $codeRef.setValue(this.eventInfo.eventScript)
      }
    },
    removeEvent(row){
      const { events } = this.labDesign.activity
      const index = events.findIndex(item => item.trigger === row.value)
      if (index > -1) {
        events.splice(index, 1)
      }
      this.$resultMsg(this, { code: 200, msg: '删除成功'} )
    },
    saveEvent() {
      const { events } = this.labDesign.activity
      const index = events.findIndex(item => item.trigger === this.eventInfo.trigger)
      if (index < 0) {
        events.splice(0, 0, this.$Util.copy(this.eventInfo))
      } else {
        events.splice(index, 1, this.$Util.copy(this.eventInfo))
      }
      this.eventVisible = false
    },
    openRequest(row) {
      const { requests } = this.labDesign.activity
      this.$Util.cleanObj(this, this.requestInfo)
      let targetRequest = {}
      if (requests) {
        targetRequest = requests.find(item => item.trigger === row.value)
      }
      this.$Util.copyAttr(targetRequest, this.requestInfo, null, this)
      if (!targetRequest) {
        this.requestInfo.requestId = ''
        this.requestInfo.trigger = row.value
        this.requestInfo.params = [ ]
        this.requestInfo.filters = [ ]
      }
      this.requestVisible = true
    },
    removeRequest(row){
      const { requests } = this.labDesign.activity
      const index = requests.findIndex(item => item.trigger === row.value)
      if (index > -1) {
        requests.splice(index, 1)
      }
      this.$resultMsg(this, { code: 200, msg: '删除成功'} )
    },
    saveRequest(){
      const { requests } = this.labDesign.activity
      const index = requests.findIndex(item => item.trigger === this.requestInfo.trigger)
      if (index < 0) {
        requests.splice(0, 0, this.$Util.copy(this.requestInfo))
      } else {
        requests.splice(index, 1, this.$Util.copy(this.requestInfo))
      }
      this.requestVisible = false
    },
    methodClick(row) {
      const $codeRef = this.$refs.codeRef
      this.eventInfo.callMethod = row.callCmd
      if ($codeRef) {
        $codeRef.setValue(row.methodBody)
      }
    }
  }
}
</script>
